<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灌篮高手首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/header.css">
    <script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <a href="#" class="logo">Slamdunk</a>
        <ul>
            <li class="nav"><a href="./index.html" target="_blank">首页</a></li>
            <li class="nav"><a href="./html/demo03.html" target="_blank">图集</a></li>
            <li class="nav"><a href="./html/demo01.html" target="_blank">漫画介绍</a></li>
            <li class="nav"><a href="./html/demo02.html" target="_blank">作者介绍</a></li>
            <li class="nav"><a href="./html/login.html" target="_blank">登陆</a></li>
        </ul>
    </header>
    <!-- 轮播图 -->
    <div class="banner">
        <ul class="list">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index=0></li>
            <li class="point" data-index=1></li>
            <li class="point" data-index=2></li>
            <li class="point" data-index=3></li>
            <li class="point" data-index=4></li>
        </ul>
        <button class="btn" id="leftBtn">
            < </button>
                <button class="btn" id="rightBtn"> > </button>
    </div>
    <!-- 回到顶部按钮 -->
    <div class="back"></div>
    <!-- 图集 -->
    <div id="content">
        <p>湘北主力球员</p>
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
        <div class="con4"></div>
    </div>
    <!-- 球员介绍 -->
    <div id="list">
        <h1>球员介绍</h1>
        <hr color="#000000" size="5" width="80%">
        <div class="lis1">
            <h2>流川枫</h2>
            <p> 在富丘国中时期就倍受瞩目、挟着最佳新人头衔进入湘北的流川枫，<br>
                顺理成章地成为湘北篮球队的主力。他入学湘北的理由简单得令人<br>
                难以置信——离家近。流川枫不但外表英俊潇洒、酷劲十足，而且球<br>
                技也很出色是不可多得前锋。也因此迷到了众多女生，连晴子也是<br>
                “拥枫派”的一员，似乎有流川的比赛就会有女生的尖叫声。随着湘<br>
                北篮球队的四处征战，流川枫的球技 更加成熟与完善。
            </p>
        </div>
        <div class="lis2">
            <h2>樱木花道</h2>
            <p> 神奈川县湘北高中高中一年级学生，原是一名篮球白痴，为了心爱<br>
                的赤木晴子而加入湘北高中篮球部，现为湘北篮球队的主力队员之<br>
                一，司职大前锋，身体素质惊人，有着顶尖的弹跳力和滞空能力，<br>
                盖帽及篮板球能力超强，另是樱木军团头目。
            </p>
        </div>
        <div class="lis3">
            <h2>三井寿</h2>
            <p> 三井寿是日本漫画《灌篮高手》中的角色。有“炎之男”之称的他是<br>
                湘北篮球队的得分后卫，拿手绝技是三分球，并且具有强烈的求胜<br>
                欲望。三井寿初中时曾是武石中学的皇牌球员，极具篮球天赋，基<br>
                础扎实，能力全面，自认可以胜任所有位置，在县大赛总决赛上球<br>
                队曾一度落后对手，后在奋力扑球后受到安西教练的鼓舞，最后带<br>
                领武石中学夺得县大赛冠军并获得MVP。
            </p>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="footer_logo"></div>
        <p>&copy; 此页面作者:计应21-1 劳尚思<br>网站仅用于个人学习使用<br>如有侵权联系删除</p>
        <div class="tel"></div>
        <div class="wechat">
            <div class="my"></div>
        </div>
        <div class="e-mail"></div>
    </div>

</body>
<script>
    //回到顶部
    $(document).ready(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 600) {
                $(".back").fadeIn();
            } else {
                $(".back").fadeOut();
            }
        });
    });
    $(".back").click(function () {
        $("body,html").stop().animate({
            scrollTop: 0
        });
    });
    // 导航栏
    window.addEventListener('scroll', () => {
        let header = document.querySelector('header')
        header.classList.toggle('sticky', window.scrollY > 0)
    });
    //鼠标经过高光
    $(function () {
        $("#content div").hover(function () {
            $(this).siblings().stop().fadeTo(400, 0.40);
        }, function () {
            $(this).siblings().stop().fadeTo(400, 1);
        });
    });
    // 轮播图
    var items = document.querySelectorAll(".item");//图片节点
    var points = document.querySelectorAll(".point")//点
    var left = document.getElementById("leftBtn");
    var right = document.getElementById("rightBtn");
    var all = document.querySelector(".benner")
    var index = 0;
    var time = 0;
    var clearActive = function () {
        for (i = 0; i < items.length; i++) {
            items[i].className = 'item';
        }
        for (j = 0; j < points.length; j++) {
            points[j].className = 'point';
        }
    }

    var goIndex = function () {
        clearActive();
        items[index].className = 'item active';
        points[index].className = 'point active'
    }
    //左按钮事件
    var goLeft = function () {
        if (index == 0) {
            index = 4;
        } else {
            index--;
        }
        goIndex();
    }

    //右按钮事件
    var goRight = function () {
        if (index < 4) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }
    left.addEventListener('click', function () {
        goLeft();
        time = 0;
    })

    right.addEventListener('click', function () {
        goRight();
        time = 0;
    })

    for (i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function () {
            var pointIndex = this.getAttribute('data-index')
            index = pointIndex;
            goIndex();
            time = 0;
        })
    }
    var timer;
    function play() {
        timer = setInterval(() => {
            time++;
            if (time == 20) {
                goRight();
                time = 0;
            }
        }, 100)
    }
    play();
    all.onmousemove = function () {
        clearInterval(timer)
    }
    all.onmouseleave = function () {
        play();
    }

</script>

</html>